<template>
    <view>
        <!-- 固定区域（头部+导航） -->
        <view class="fixed-top" :style="{ paddingTop: StatusBar + 'px' }">
            <!-- 顶部标题 -->

            <cu-custom :bgImage="bgImage">
                <view class="text-bold text-black" slot="content">官方商城</view>
            </cu-custom>

            <!-- 分类导航 -->
            <view class="bg-white fixed-tabs">
                <scroll-view scroll-x class="nav">
                    <view class="flex text-center">
                        <view class="category-item" v-for="(item, index) in tabList" :key="index"
                            @tap="switchCategory(item, index)">
                            <text :class="index == TabCur ? 'text-orange category-active' : 'category-normal'">{{ item }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 内容区域（带有足够的顶部边距） -->
        <view class="content-container" :style="[{ paddingTop: CustomBar + 40 + 'px' }]">
            <!-- 商品列表 -->
            <view class="product-list">
                <view class="product-item" v-for="(item, index) in products" :key="index">
                    <view class="product-flex">
                        <image class="product-image" :src="item.image" mode="aspectFill"></image>
                        <view class="product-info">
                            <view class="product-name">{{ item.name }}
                                <view class="product-price text-orange">¥
                                    {{ item.price }}</view>
                            </view>
                            <view class="product-spec">规格：{{ item.spec }}</view>
                            <view class="product-stock">库存：{{ item.stock }}</view>
                            <view class="flex justify-between align-center margin-top-xs">
                                <view class="quantity-control">
                                    <button class="quantity-btn">-</button>
                                    <input type="number" class="quantity-input" value="1" />
                                    <button class="quantity-btn">+</button>
                                </view>
                                <view class="order-btn">下单</view>
                            </view>
                        </view>
                    </view>
                    <view class="divider-line" v-if="index !== products.length - 1"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import bgImage from '@/static/tabbar/header.png';
export default {
    data() {
        return {
            bgImage,
            StatusBar: this.$statusBarHeight,
            CustomBar: this.$CustomBar,
            currentCategory: '晶系列',
            tabList: ['晶系列', '养系列', '源系列'],
            TabCur: 0,
            products: [
                {
                    id: 1,
                    name: '黑晶系列（礼盒装）',
                    image: '/static/product1.jpg',
                    price: 5588,
                    spec: '420mg×30支',
                    stock: 600
                },
                {
                    id: 2,
                    name: '黑晶系列（礼盒装）',
                    image: '/static/product1.jpg',
                    price: 5588,
                    spec: '420mg×30支',
                    stock: 600
                },
                {
                    id: 3,
                    name: '黑晶系列（礼盒装）',
                    image: '/static/product1.jpg',
                    price: 5588,
                    spec: '420mg×30支',
                    stock: 600
                },
                {
                    id: 4,
                    name: '黑晶系列（礼盒装）',
                    image: '/static/product1.jpg',
                    price: 5588,
                    spec: '420mg×30支',
                    stock: 600
                }
            ]
        };
    },
    methods: {
        switchCategory(category, index) {
            this.currentCategory = category;
            this.TabCur = index;
        },
        toProductDetail(product) {
            uni.navigateTo({
                url: '/pages/product/detail?id=' + product.id
            });
        }
    }
};
</script>

<style>
.gold-bg {
    background: linear-gradient(to bottom, #d4b78f, #c4a06f);
}

.nav {
    white-space: nowrap;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
}

.category-item {
    display: inline-block;
    padding: 20rpx 30rpx;
    position: relative;
}

.category-active {
    color: #ff6600;
    border-bottom: 6rpx solid #ff6600;
    padding-bottom: 20rpx;
}

.category-normal {
    padding-bottom: 20rpx;
}

.product-list {
    padding: 20rpx;
}

.product-item {
    background-color: #ffffff;
    /* margin-bottom: 20rpx; */
    border-radius: 10rpx;
    overflow: hidden;
    /* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); */
}

.product-flex {
    display: flex;
    flex-direction: row;
}

.product-image {
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name {
    font-size: 32rpx;
    margin-bottom: 10rpx;
}

.product-price {
    font-size: 36rpx;
    font-weight: bold;
    float: right;
}

.product-spec,
.product-stock {
    font-size: 28rpx;
    color: #888;
    margin-bottom: 10rpx;
}

.quantity-control {
    display: flex;
    align-items: center;
    border: 1rpx solid #ddd;
    border-radius: 6rpx;
}

.quantity-btn {
    width: 60rpx;
    height: 60rpx;
    line-height: 56rpx;
    text-align: center;
    background: #f5f5f5;
    border: none;
    font-size: 32rpx;
    padding: 0;
    border-radius: 0;
}

.quantity-btn:after {
    border: none;
    border-radius: 0;
}

.quantity-input {
    width: 80rpx;
    height: 60rpx;
    text-align: center;
    border-left: 1rpx solid #ddd;
    border-right: 1rpx solid #ddd;
}

.order-btn {
    background-color: #ff6600;
    color: #fff;
    padding: 15rpx 40rpx;
    border-radius: 50rpx;
    font-size: 28rpx;
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.fixed-tabs {
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.content-container {
    width: 100%;
}

.product-image-divider {
    width: 100%;
    display: block;
    height: auto;
    margin: 10rpx 0;
}

.divider-line {
    width: 100%;
    height: 5rpx;
    background: linear-gradient(to right, 
        transparent 0%,
        rgba(210, 179, 136, 0.3) 5%,
        rgba(210, 179, 136, 0.6) 20%,
        rgba(210, 179, 136, 1) 40%,
        rgba(210, 179, 136, 1) 60%,
        rgba(210, 179, 136, 0.6) 80%,
        rgba(210, 179, 136, 0.3) 95%,
        transparent 100%);
    margin: 10rpx 0;
}
</style>